<template>
  <div class="container">
    <h1>一号稠油联合处理站化学助剂使用台账</h1>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="各药剂台账" name="first">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              style="margin-left: 10px"
              v-model="paramDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table :data="paginatedData" border stripe style="width: 100%">
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="常规原油处理">
              <el-table-column label="处理液量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="原油脱出污水量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament004
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD密闭处理">
              <el-table-column label="预处理液量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament005
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理剂(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament006
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相处理液量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament007
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="耐温正相破乳剂(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament008
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="药剂浓度">
              <el-table-column label="正相破乳剂浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament009
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament010
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理剂浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament011
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="耐温正相破乳剂浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament012
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一区">
              <el-table-column label="反应器处理水量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament013
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="净水剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament014"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament014')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament015"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament015')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="除硅反应器水量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament016
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅预处理剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament017"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament017')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament018"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament018')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水二区">
              <el-table-column label="气浮处理水量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament019
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="一段净水剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament020"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament020')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段净水剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament021"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament021')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="一段助滤剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament022"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament022')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段助滤剂(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament023"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament023')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="除硅药量L/d" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament024"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament024')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="过滤器出水量">
              <el-table-column label="水一(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament025
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="水二(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament026
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一区污泥处理(助滤剂)">
              <el-table-column label="收泥量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament027
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加药量(kg/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament028"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament028')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水二区污泥处理(助滤剂)">
              <el-table-column label="收泥量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament029
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加药量(kg/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.medicament030"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'medicament030')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="去二联水量(m³/d)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.medicament031
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="冷凝水站">
              <el-table-column label="冷凝水来水量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament032
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="过滤出水量(m³/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament033
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加药量(kg/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament034
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="常规原油处理">
              <el-table-column label="正相加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament035
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament036
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="SAGD高温密闭站">
              <el-table-column label="SAGD预处理剂加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament037
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="耐温正相加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament038
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一区">
              <el-table-column label="净水剂浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament039
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂浓度0.5%(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament040
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅预处理剂浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament041
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂浓度15%(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament042
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="污泥加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament043
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水二区">
              <el-table-column label="净水剂浓度30%(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament044
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂浓度0.5%(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament045
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅药浓度30%(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament046
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="污泥加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament047
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="冷凝水站">
              <el-table-column label="加药浓度(mg/L)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.medicament048
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.row)"
                >
                  保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            :total="totalItems"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="各岗位台账" name="second">
        <div class="block">
          <el-card shadow="always">
            <span class="demonstration" style="font: bolder">日期:</span>
            <el-date-picker
              style="margin-left: 10px"
              v-model="paramDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <el-button type="primary" style="margin-left: 40px">查询</el-button>
          </el-card>
        </div>
        <el-card shadow="always" style="margin-top: 15px">
          <el-table
            :data="paginatedPositionData"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column label="日期" width="120">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column label="油量统计">
              <el-table-column label="减冲洗水后液量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position001
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实际液量(m³)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position002
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="处理站油量(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position003
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="富城产油" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position004"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position004')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="实际油量(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position005
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="上报油量/t" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position006
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="外输油量/m3" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position007
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="交油凭单量/t" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position008
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="实际交油量/t" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position009
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="分线计量统计/m3">
              <el-table-column label="1线(18二副线)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position010
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="2线(32北线)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position011
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="3线(重18-1线)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position012
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="5线(13-11线)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position013
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="7线(32南线)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position014
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="8线(卸油台)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position015
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="6线(SAGD线)(暂不填写)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position016
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SAGD-1/(管汇间计量)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position017
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="分线计量合计(处理液量)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position018
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="30万吨密闭液量统计/m3">
              <el-table-column label="水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position019
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="油量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position020
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="总液量(正相处理液量)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position021
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理液量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position022
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="进液计量合计(合计+30万总液)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.position023
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="原油系统药剂统计/kg">
              <el-table-column label="正相一段破乳剂(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position024
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相一段破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position025
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相一段破乳剂浓度" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position026
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相二段破乳剂(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position027
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相二段破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position028
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相二段破乳剂浓度(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position029
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position030
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="正相破乳剂(浓度)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position031
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position032
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position033
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(浓度)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position034
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="30万药剂统计/kg">
              <el-table-column label="预处理剂(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position035
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position036
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预处理剂(浓度)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position037
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="耐温正相破乳(t)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position038
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="耐温正相破乳(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position039
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="耐温正相破乳(浓度)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position040
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一区药剂统计/kg">
              <el-table-column label="1#药剂(kw-01)kg" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position041"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position041')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="1#药剂(kw-01)L/h" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position042
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="3#药剂(kw-03)kg" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position043"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position043')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="3#药剂(kw-03)L/h" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position044
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂1#L/h" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position045"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position045')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="除硅剂2#M3/h" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position046"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position046')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水二区药剂统计">
              <el-table-column label="净水体积/m3" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position047"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position047')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="净水剂/kg" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position048
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="助凝剂体积/m3" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position049"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position049')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="絮凝剂/kg" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position050
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一区液量统计/m3">
              <el-table-column label="来水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position051
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="污水回收量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position052
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反应器处理量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position053
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="过滤器出水" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position054
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反洗用水(流量计前)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position055
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="热洗水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position056
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="循环水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position057
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="循环比%" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position058
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水二区液量统计/m3">
              <el-table-column label="来水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position059
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="污水回收量（浓缩池、万方池、水二反洗、冷凝水站反洗）"
                width="150"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position060
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="四合一回收水" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position061
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="冷凝水转净化罐" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position062
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="去二号稠油联合站水量/m3" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position063
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="水二区除硅反应器流量(m³)水二区除硅反应器流量(m³)"
                width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position064"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position064')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="气浮处理量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position065
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="过滤器出水" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position066
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反洗用水(流量计后)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position067
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="清水量(修井)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position068"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position068')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="调出罐至过滤器日消耗液量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position069
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="循环水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position070
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="循环比%" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position071
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污水系统进出水量统计/m3">
              <el-table-column label="水区进水总量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position072
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="油区实际来水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position073
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="水区总处理量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position074
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="过滤器出水总量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position075
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="净化罐接收水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position076
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="净化罐接收水量（包括冷凝水站）"
                width="150"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position077
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="循环水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position078
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="循环比%" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position079
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="外循环水量统计/m3">
              <el-table-column label="万方池回收水量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position080
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="新奥达回收进除油罐" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position081
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="冷凝水站">
              <el-table-column label="来水量(m3)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position082
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="产水量(m3)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position083
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反洗水量(m3)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position084
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position085
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="反相破乳剂浓度(mg/l)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position086
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="站内柴油用量统计/m3">
              <el-table-column label="管汇掺柴油量" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position087
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="0" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position088
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="合计" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position089
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="日用柴油量合计/t">
              <el-table-column label="(2个点)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position090
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一区">
              <el-table-column label="水一区除硅反应器水量(m³)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position091"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position091')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水一实际净化水量(m³)">
              <el-table-column label="(2个点)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position092
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="科力收泥">
              <el-table-column label="收泥量(m³)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position093"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position093')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="加药袋数(袋)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position094"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position094')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="加药量(kg)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position095
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="三达收泥">
              <el-table-column label="收泥量(m³)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position096"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position096')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="加药量(kg)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position097"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position097')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="化验">
              <el-table-column label="提升泵含水(8:00)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position098
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="掺柴比(%)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.position099
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="富城">
              <el-table-column label="富城收油(车数)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position100"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position100')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="富城收油(t)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position101"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position101')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="污油">
              <el-table-column label="顺通污油(车数)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position102"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position102')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="污油加药(kg)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position103"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position103')"
                  ></el-input>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="水二区">
              <el-table-column label="SDTG除硅药剂/m3/d" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position104"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position104')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段净水剂A气浮(L/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position105"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position105')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段净水剂B气浮(m3/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position106"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position106')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段助滤剂 A气浮(m3/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position107"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position107')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段助滤剂 B气浮(m3/d)" width="150">
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position108"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position108')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="一段除硅反应器净水剂加药(m3/d)"
                width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position109"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position109')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="一段除硅反应器助滤剂加药(m3/d)"
                width="150"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.position110"
                    placeholder="请输入"
                    type="number"
                    size="small"
                    @input="handleInput(scope, 'position110')"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="二段净水剂合计(L/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position111
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="二段助滤剂合计(m3/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position112
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="一段除硅反应器净水剂加药(m3/d)"
                width="150"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position113
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="一段除硅反应器助滤剂加药(m3/d)"
                width="150"
              >
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position114
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SDTG除硅药剂(L/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position115
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="净水剂合计(L/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position116
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="助滤剂剂合计(L/d)" width="150">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.position117
                  }}</span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="转水泵出口流量计累计量(m3)" width="150">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.position118
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="140">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  @click="handleEdit(scope.row)"
                >
                  保存
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div class="block">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="positionCurrentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="positionPageSize"
            :total="positionTotalItems"
            @current-change="positionhandlePageChange"
            @size-change="positionhandleSizeChange"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
const calculationConfig = {
  medicament001: "sum",
  medicament002: "sum",
  medicament003: "sum",
  medicament004: "sum",
  medicament005: "sum",
  medicament006: "sum",
  medicament007: "sum",
  medicament008: "sum",
  medicament009: "sum",
  medicament010: "sum",
  medicament011: "sum",
  medicament012: "sum",
  medicament013: "sum",
  medicament014: "sum",
  medicament015: "sum",
  medicament016: "sum",
  medicament017: "sum",
  medicament018: "sum",
  medicament019: "sum",
  medicament020: "sum",
  medicament021: "sum",
  medicament022: "sum",
  medicament023: "sum",
  medicament024: "sum",
  medicament025: "sum",
  medicament026: "sum",
  medicament027: "sum",
  medicament028: "sum",
  medicament029: "sum",
  medicament030: "sum",
  medicament031: "sum",
  medicament032: "sum",
  medicament033: "sum",
  medicament034: "sum",
  medicament035: "sum",
  medicament036: "sum",
  medicament037: "sum",
  medicament038: "sum",
  medicament039: "sum",
  medicament040: "sum",
  medicament041: "sum",
  medicament042: "sum",
  medicament043: "sum",
  medicament044: "sum",
  medicament045: "sum",
  medicament046: "sum",
  medicament047: "sum",
  medicament048: "sum",
};
const positionCalculationConfig = {
  position001: "sum",
  position002: "sum",
  position003: "sum",
  position004: "sum",
  position005: "sum",
  position006: "sum",
  position007: "sum",
  position008: "sum",
  position009: "sum",
  position010: "sum",
  position011: "sum",
  position012: "sum",
  position013: "sum",
  position014: "sum",
  position015: "sum",
  position016: "sum",
  position017: "sum",
  position018: "sum",
  position019: "sum",
  position020: "sum",
  position021: "sum",
  position022: "sum",
  position023: "sum",
  position024: "sum",
  position025: "sum",
  position026: "sum",
  position027: "sum",
  position028: "sum",
  position029: "sum",
  position030: "sum",
  position031: "sum",
  position032: "sum",
  position033: "sum",
  position034: "sum",
  position035: "sum",
  position036: "sum",
  position037: "sum",
  position038: "sum",
  position039: "sum",
  position040: "sum",
  position041: "sum",
  position042: "sum",
  position043: "sum",
  position044: "sum",
  position045: "sum",
  position046: "sum",
  position047: "sum",
  position048: "sum",
  position049: "sum",
  position050: "sum",
  position051: "sum",
  position052: "sum",
  position053: "sum",
  position054: "sum",
  position055: "sum",
  position056: "sum",
  position057: "sum",
  position058: "sum",
  position059: "sum",
  position060: "sum",
  position061: "sum",
  position062: "sum",
  position063: "sum",
  position064: "sum",
  position065: "sum",
  position066: "sum",
  position067: "sum",
  position068: "sum",
  position069: "sum",
  position070: "sum",
  position071: "sum",
  position072: "sum",
  position073: "sum",
  position074: "sum",
  position075: "sum",
  position076: "sum",
  position077: "sum",
  position078: "sum",
  position079: "sum",
  position080: "sum",
  position081: "sum",
  position082: "sum",
  position083: "sum",
  position084: "sum",
  position085: "sum",
  position086: "sum",
  position087: "sum",
  position088: "sum",
  position089: "sum",
  position090: "sum",
  position091: "sum",
  position092: "sum",
  position093: "sum",
  position094: "sum",
  position095: "sum",
  position096: "sum",
  position097: "sum",
  position098: "sum",
  position099: "sum",
  position100: "sum",
  position101: "sum",
  position102: "sum",
  position103: "sum",
  position104: "sum",
  position105: "sum",
  position106: "sum",
  position107: "sum",
  position108: "sum",
  position109: "sum",
  position110: "sum",
  position111: "sum",
  position112: "sum",
  position113: "sum",
  position114: "sum",
  position115: "sum",
  position116: "sum",
  position117: "sum",
  position118: "sum",
};
export default {
  data() {
    return {
      activeName: "second",
      currentPage: 1, // 当前页码
      positionCurrentPage: 1, // 各岗位当前页码
      pageSize: 10, // 每页显示的数据条数
      positionPageSize: 10, // 各岗位每页显示的数据条数
      paramDate: ["2024-11-01", "2024-11-08"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          id: "1",
          medicament001: 31652,
          medicament002: 402,
          medicament003: 354,
          medicament004: 1240,
          medicament005: 2489,
          medicament006: 257,
          medicament007: 6587,
          medicament008: 433,
          medicament009: 461,
          medicament010: 233,
          medicament011: 234,
          medicament012: 552,
          medicament013: 564,
          medicament014: 402,
          medicament015: 367,
          medicament016: 908,
          medicament017: 375,
          medicament018: 2345,
          medicament019: 1280,
          medicament020: 4070,
          medicament021: 3060,
          medicament022: 2080,
          medicament023: 1660,
          medicament024: 1050,
          medicament025: 5080,
          medicament026: 960,
          medicament027: 523,
          medicament028: 672,
          medicament029: 892,
          medicament030: 795,
          medicament031: 452,
          medicament032: 336,
          medicament033: 448,
          medicament034: 2690,
          medicament035: 3210,
          medicament036: 3573,
          medicament037: 1679,
          medicament038: 5278,
          medicament039: 7509,
          medicament040: 2412,
          medicament041: 3252,
          medicament042: 3656,
          medicament043: 478,
          medicament044: 3266,
          medicament045: 6334,
          medicament046: 2368,
          medicament047: 1242,
          medicament048: 2567,
        },
      ],
      positionTableData: [
        {
          date: "2016-05-02",
          id: "1",
          position001: 1,
          position002: 2,
          position003: 3,
          position004: 4,
          position005: 5,
          position006: 6,
          position007: 7,
          position008: 8,
          position009: 9,
          position010: 10,
          position011: 11,
          position012: 12,
          position013: 13,
          position014: 14,
          position015: 15,
          position016: 16,
          position017: 17,
          position018: 18,
          position019: 19,
          position020: 20,
          position021: 21,
          position022: 22,
          position023: 23,
          position024: 24,
          position025: 25,
          position026: 26,
          position027: 27,
          position028: 28,
          position029: 29,
          position030: 30,
          position031: 31,
          position032: 32,
          position033: 33,
          position034: 34,
          position035: 35,
          position036: 36,
          position037: 37,
          position038: 38,
          position039: 39,
          position040: 40,
          position041: 41,
          position042: 42,
          position043: 43,
          position044: 44,
          position045: 45,
          position046: 46,
          position047: 47,
          position048: 48,
          position049: 49,
          position050: 50,
          position051: 51,
          position052: 52,
          position053: 53,
          position054: 54,
          position055: 55,
          position056: 56,
          position057: 57,
          position058: 58,
          position059: 59,
          position060: 60,
          position061: 61,
          position062: 62,
          position063: 63,
          position064: 64,
          position065: 65,
          position066: 66,
          position067: 67,
          position068: 68,
          position069: 69,
          position070: 70,
          position071: 71,
          position072: 72,
          position073: 73,
          position074: 74,
          position075: 75,
          position076: 76,
          position077: 77,
          position078: 78,
          position079: 79,
          position080: 80,
          position081: 81,
          position082: 82,
          position083: 83,
          position084: 84,
          position085: 85,
          position086: 86,
          position087: 87,
          position088: 88,
          position089: 89,
          position090: 90,
          position091: 91,
          position092: 92,
          position093: 93,
          position094: 94,
          position095: 95,
          position096: 96,
          position097: 97,
          position098: 98,
          position099: 99,
          position100: 100,
          position101: 101,
          position102: 102,
          position103: 103,
          position104: 104,
          position105: 105,
          position106: 106,
          position107: 107,
          position108: 108,
          position109: 109,
          position110: 110,
          position111: 111,
          position112: 112,
          position113: 113,
          position114: 114,
          position115: 115,
          position116: 116,
          position117: 117,
          position118: 118,
        },
      ],
      editedRows: new Set(), // 存储被编辑的行
    };
  },
  mounted() {},
  created() {
    // 调用方法，生成更多数据，例如添加10条
    this.addMoreData(56);
  },
  beforeDestroy() {},
  methods: {
    // 保存按钮点击事件
    handleEdit(row) {
      if (this.editedRows.has(row)) {
        // 调用后端 API 进行更新
        this.updateRecord(row)
          .then((response) => {
            this.$message.success("保存成功");
            this.editedRows.delete(row); // 保存后取消标记
          })
          .catch((error) => {
            this.$message.error("保存失败，请重试");
          });
      } else {
        this.$message.info("无更改无需保存");
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleInput(scope, field) {
      const value = scope.row[field];
      // 转换为数字，如果为空则设置为 NaN 或其他默认值
      scope.row[field] = value === "" ? null : Number(value);
      this.markAsEdited(scope.row);
    },
    // 标记被编辑的行
    markAsEdited(row) {
      this.editedRows.add(row);
    },
    // 更新记录的后端调用
    async updateRecord(row) {
      console.log("row", row);
      // 示例后端 API 请求
      const url = `/api/updateRecord`;
      const response = await axios.post(url, {
        date: row.date,
        mvc001: row.mvc001,
        mvc004: row.mvc004,
        mvc009: row.mvc009,
      });
      return response.data;
    },
    // 处理页码变更
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 各岗位处理页码变更
    positionhandlePageChange(page) {
      this.positionCurrentPage = page;
    },
    // 处理每页条数变更
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1; // 重置为第一页
    },
    // 各岗位处理每页条数变更
    positionhandleSizeChange(size) {
      this.positionPageSize = size;
      this.positionCurrentPage = 1; // 重置为第一页
    },
    addMoreData(repeatCount) {
      // 获取现有的数据作为模板
      const templateData = this.tableData[0];
      const templateData2 = this.positionTableData[0];
      // 添加指定数量的重复数据
      for (let i = 1; i <= repeatCount; i++) {
        const newData = { ...templateData };
        const newData2 = { ...templateData2 };
        // 更新日期或其他字段，以使每条数据项有所区别
        newData.date = `2016-05-${(i + 2).toString().padStart(2, "0")}`;
        newData.id = `${(i + 1).toString()}`;
        newData2.date = `2016-05-${(i + 2).toString().padStart(2, "0")}`;
        newData2.id = `${(i + 1).toString()}`;
        this.tableData.push(newData);
        this.positionTableData.push(newData2);
      }
      this.addSummaryRow(this.tableData, calculationConfig);
      this.addSummaryRow(this.positionTableData, positionCalculationConfig);
      this.calculateLastRowTableData();
    },
    calculateLastRowTableData() {
      // 获取表格的最后一行数据
      const lastRow = this.tableData[this.tableData.length - 1];
      if (lastRow) {
        lastRow.thinOil018 = +(
          ((lastRow.thinOil002 + lastRow.thinOil017 + lastRow.thinOil016) /
            lastRow.thinOil001) *
          1000
        ).toFixed(2);

        lastRow.thinOil019 = +(
          (lastRow.thinOil004 / lastRow.thinOil005) *
          1000
        ).toFixed(2);

        lastRow.thinOil020 = +(
          (lastRow.thinOil009 * 220) /
          lastRow.thinOil005
        ).toFixed(2);

        lastRow.thinOil021 = +(
          (lastRow.thinOil010 * 1.3) /
          lastRow.thinOil005
        ).toFixed(2);

        lastRow.thinOil022 = +(
          (lastRow.thinOil012 / lastRow.thinOil005) *
          1000
        ).toFixed(2);

        lastRow.thinOil023 = +(
          (lastRow.thinOil013 / lastRow.thinOil006) *
          1000
        ).toFixed(2);

        lastRow.thinOil024 = +(
          (lastRow.thinOil014 / lastRow.thinOil007) *
          1000
        ).toFixed(2);

        lastRow.thinOil025 = +(
          (lastRow.thinOil015 * 200) /
          lastRow.thinOil005
        ).toFixed(2);
      }
    },
    addSummaryRow(tableData, calculationConfig) {
      const summaryRow = { date: "全年合计" };
      // 动态获取需要计算的列名（排除 'date' 列）
      const columns = Object.keys(tableData[0]).filter(
        (column) => column !== "date"
      );
      // 遍历每列，按配置计算总和或平均值
      columns.forEach((column) => {
        const isSum = calculationConfig[column] === "sum";
        const total = tableData.reduce((sum, row) => {
          return sum + (row[column] || 0);
        }, 0);
        // 如果是求和，直接使用总和；如果是求平均，使用总和除以行数
        const result = isSum ? total : total / tableData.length;
        // 保留两位小数并转为数值
        summaryRow[column] = parseFloat(result.toFixed(2));
      });
      // 将合计行添加到表格数据
      tableData.push(summaryRow);
    },
  },
  computed: {
    // 总数据量
    totalItems() {
      return this.tableData.length;
    },
    // 各岗位总数据量
    positionTotalItems() {
      return this.positionTableData.length;
    },
    // 分页后的数据
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
    // 各岗位分页后的数据
    paginatedPositionData() {
      const start = (this.positionCurrentPage - 1) * this.positionPageSize;
      const end = this.positionCurrentPage * this.positionPageSize;
      return this.positionTableData.slice(start, end);
    },
  },
};
</script>
<style scoped lang="scss">
.el-table_row .warning-row {
  background-color: red;
}

h1 {
  color: rgb(104, 224, 223);
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}
/* .container{
      height: 100vh;
    } */
.table-content {
  border: 3px solid rgb(30, 94, 158);
  width: 93%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 50px;
  /* margin:80px auto; */
  // height: 95vh;
  // overflow: auto;
}
.container {
  /* max-width: 600px;   */
  background-color: rgb(2, 16, 79);
  height: 100vh;
  overflow-x: auto; /* 设置横向滚动 */
  white-space: nowrap; /* 防止内容自动换行 */
}
.el-table {
  // overflow: auto;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  margin-bottom: 20px;

  /* height: 2000px; */
  border-color: #f0f0f0;
  border-width: 2px;

  /* background-color: red; */
}
</style>
